<template>
	<div id="app">
		<div>
			<span>商品配置 > 大类管理 </span>
			<el-button type="success" size="mini" @click="shuaxin">刷新</el-button>
		</div>
		<!-- 页面顶部 -->
		<div style="margin-left: 15%">
			<div>
				<!-- 模糊查询输入框 -->
				<span style="font-size: 13px;">模糊查询：</span>
				<el-input style="display: inline-block; width: 200px;" placeholder="请输入商品大类名称进行查询" size="mini"
					v-model="loadGeneralParam.keyword"></el-input>
				<!-- 模糊查询按钮 -->
				<el-button style="margin-left: 10px;" type="primary" size="mini" @click="findByKeyword">查询</el-button>
				<!-- 新增按钮 -->
				<el-button type="primary" size="mini" style="margin-left:400px" @click="addButton">新增</el-button>
				<!-- 删除按钮 -->
				<el-button type="danger" size="mini" style="margin-left:10px" @click="deleteButton">删除</el-button>
			</div>
			<!-- 大类信息展示表 -->
			<el-table style="width: 100%; " :data="PageGoodsGeneralDto.generalDtos" @selection-change="CheckedIds">
				<!-- 展示大类信息 -->
				<el-table-column type="selection" label="序号"></el-table-column>
				<el-table-column prop="goodsGeneralId" label="大类编号"></el-table-column>
				<el-table-column prop="goodsGeneralName" label="大类名称"></el-table-column>
				<el-table-column label="大类图标" width="80">
					<template slot-scope="scope">
						<el-image style="width: 30px; height: 30px" :src="scope.row.goodsGeneralImages"
							:preview-src-list="[scope.row.goodsGeneralImages]">
							<div slot="error" class="image-slot">
								<i class="el-icon-picture-outline"></i>
							</div>
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="goodsGeneralLeave" label="级别"></el-table-column>
				<el-table-column prop="goodsGeneralMessage" label="备注"></el-table-column>
				<!-- 展示表的最后一列是修改操作 -->
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" circle icon="el-icon-edit" @click="updateButton(scope.row)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 页码 -->
			<div style="margin: auto;">
				<template>
					<div class="block">
						<span class="demonstration"></span>
						<el-pagination @current-change="CurrentChange" :total="PageGoodsGeneralDto.total"
							:page-size="loadGeneralParam.pageSize" layout="total, prev, pager, next">
						</el-pagination>
					</div>
				</template>
			</div>
		</div>

		<!-- 修改信息的弹窗 -->
		<el-dialog title="请输入需要更改的内容" :visible.sync="updateVisible">
			<el-form ref="form" label-width="120px">
				<el-form-item label="大类名称：">
					<el-input style="display: inline-block; width: 200px;" size="mini"
						v-model="UpdateGoodsGeneralParam.goodsGeneralName"></el-input>
				</el-form-item>
				<el-form-item label="大类图标：">
					<el-upload class="upload-demo" action="http://localhost:8080/file/upload" list-type="picture"
						:on-success="changeuploadSuccess" :beforeUpload="changebeforeUpload">
						<el-button size="mini" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">图标尺寸为36*36比例，大小不能超过2MB，图片只能为JPG、PNG、GIF格式</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="备注：">
					<el-input style="display: inline-block; width: 200px;" size="mini"
						v-model="UpdateGoodsGeneralParam.goodsGeneralMessage"></el-input>
				</el-form-item>
				<el-form-item label="自定义图鉴：">
					<el-form-item v-for="(img, index) in updateAppraisal" :key="img.key"
						:prop="'img.' + index + '.value'">
						<el-input v-model="img.ImgTag" style="width: 200px"></el-input>
						<el-select placeholder="" size="mini" style=" width: 70px;" v-model="img.selectValue">
							<el-option label="必选" value="0">
							</el-option>
							<el-option label="可选" value="1">
							</el-option>
						</el-select>
						<el-button type="text" @click.prevent="changeRemoveDomain(img)">删除</el-button>
					</el-form-item>
					<el-button type="text" @click="addChangeKindImg">新增</el-button>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="beSureUpdate">确定修改</el-button>
				<el-button type="danger" @click="quxiao">取 消</el-button>
			</span>
		</el-dialog>

		<!-- 新增 大类信息的弹窗-->
		<el-dialog title="新增大类信息" width="50%" :visible.sync="addVisible" @close="addclose">
			<el-form ref="form" label-width="120px">
				<el-form-item label="大类名称：">
					<el-input style="display: inline-block; width: 200px;" size="mini"
						v-model="AddGoodsGeneralParam.goodsGeneralName"></el-input>
				</el-form-item>
				<el-form-item label="大类图标：">
					<el-upload class="upload-demo" action="http://localhost:8080/file/upload" list-type="picture"
						:on-success="uploadSuccess" :beforeUpload="beforeUpload">
						<el-button size="mini" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">图标尺寸为36*36比例，大小不能超过2MB，图片只能为JPG、PNG、GIF格式</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="备注：">
					<el-input style="display: inline-block; width: 200px;" size="mini"
						v-model="AddGoodsGeneralParam.goodsGeneralMessage"></el-input>
				</el-form-item>
				<el-form-item label="自定义图鉴：">
					<el-form-item v-for="(img, index) in diyImg" :key="img.key" :prop="'img.' + index + '.value'">
						<el-input v-model="img.ImgTag" style="width: 200px"></el-input>
						<el-select placeholder="" size="mini" style=" width: 70px;" v-model="img.selectValue">
							<el-option label="必选" value="0">
							</el-option>
							<el-option label="可选" value="1">
							</el-option>
						</el-select>
						<el-button type="text" @click.prevent="removeDomain(img)">删除</el-button>
					</el-form-item>
					<el-button type="text" @click="addKindImg">新增</el-button>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="beSureAddGeneralInfo">确认新增</el-button>
				<el-button type="danger" @click="quxiao">取 消</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: "GoodsGeneral",
		data() {
			return {
				// 分页查询的参数
				loadGeneralParam: {
					indexPage: 1,
					pageSize: 3,
					keyword: null
				},
				//接收后端分页查询的结果	
				PageGoodsGeneralDto: {
					generalDtos: null,
					indexPage: null,
					total: null //数据总条数
					// hasPrevious: true, //是否有上一页
					// hasNext: true //是否有下一页
				},
				//批量删除操作的参数
				DeleteGeneralParam: {
					goodsGeneralIds: []
				},
				//修改操作的参数
				UpdateGoodsGeneralParam: {
					goodsGeneralId: null,
					goodsGeneralName: null,
					goodsGeneralMessage: null,
					goodsGeneralImages: null,
					goodsGeneralAppraisal: null
				},
				//接收修改时鉴定图的数据
				updateAppraisal: [],
				updateVisible: false,
				//添加大类信息的参数
				addGeneralParam: {
					goodsGeneralName: null,
					goodsGeneralMessage: null,
					goodsGeneralImages: null,
					goodsGeneralAppraisal: null
				},
				//接收自定义图鉴的数据：json格式
				diyImg: [{
					ImgTag: null, //正面、背面还是标签图
					selectValue: null //必选：0，可选：1
				}],
				addVisible: false, //默认新增信息的弹窗关闭
				//新增大类信息的参数
				AddGoodsGeneralParam: {
					goodsGeneralName: null,
					goodsGeneralMessage: null,
					goodsGeneralImages: null,
					goodsGeneralAppraisal:null
				}
			}
		},
		methods: {
			quxiao(){
				this.addVisible = false;
				this.updateVisible = false;
			},
			//刷新
			shuaxin(){
				this.loadGeneralParam.keyword = null;
				this.loadGeneral();
			},
			//加载大类信息
			loadGeneral(page) {
				if (page != null || page != undefined) {
					this.loadGeneralParam.indexPage = page;
				}
				this.$http.post("/goods-general/pageGeneralInfo", this.loadGeneralParam).then(resp => {
					if (resp.data.code == 200) {
						this.PageGoodsGeneralDto.generalDtos = resp.data.data.generalDtos;
						// console.log(resp.data.data.generalDtos);
						this.PageGoodsGeneralDto.indexPage = resp.data.data.indexPage;
						this.PageGoodsGeneralDto.total = resp.data.data.total;
					} else {
						this.$message({
							message: resp.data.msg,
							type: 'warning'
						});
					}

				})
			},
			//模糊查询按钮点击事件
			findByKeyword() {
				if (this.loadGeneralParam.keyword == null || this.loadGeneralParam.keyword == "" || this.loadGeneralParam
					.keyword == undefined) {
					this.$message({
						message: "请输入大类名称...",
						type: 'warning'
					});
				} else {
					this.loadGeneral();
				}
			},
			//当前页改变时触发的函数
			CurrentChange(page) {
				this.loadGeneral(page);
			},
			//点击新增按钮打开新增弹信息的窗
			addButton() {
				this.addVisible = true;
			},
			//获取选中的大类id
			CheckedIds(sel) {
				for (let i = 0; i < sel.length; i++) {
					this.DeleteGeneralParam.goodsGeneralIds.push(sel[i].goodsGeneralId);
				}
			},
			//删除按钮的点击事件
			deleteButton() {
				if (this.DeleteGeneralParam.goodsGeneralIds.length > 0) {
					this.$http.post("/goods-general/removeGeneralInfo", this.DeleteGeneralParam).then(resp => {
						if (resp.data.code == 200) {
							this.$message({
								message: resp.data.msg,
								type: 'success',
							});
							this.loadGeneral();
						} else {
							this.$message({
								message: resp.data.msg,
								type: 'warning'
							});
						}
					})
				} else {
					this.$message({
						message: "请先勾选数据！",
						type: 'warning'
					});
				}

			},
			//修改按钮的点击事件 
			updateButton(row) {
				// 打开弹窗，并显示将要修改的信息
				this.UpdateGoodsGeneralParam.goodsGeneralMessage = row.goodsGeneralMessage;
				this.UpdateGoodsGeneralParam.goodsGeneralId = row.goodsGeneralId;
				this.UpdateGoodsGeneralParam.goodsGeneralName = row.goodsGeneralName;
				this.UpdateGoodsGeneralParam.goodsGeneralImages = row.goodsGeneralImages;
				this.UpdateGoodsGeneralParam.goodsGeneralAppraisal = row.goodsGeneralAppraisal;
				// console.log(row.goodsGeneralAppraisal);
				if(this.UpdateGoodsGeneralParam.goodsGeneralAppraisal == null || this.UpdateGoodsGeneralParam.goodsGeneralAppraisal == undefined){
					this.$message({
						message: "该大类没有鉴定图数据！",
						type: 'warning'
					});
				}else{
					var appraisals = JSON.parse(row.goodsGeneralAppraisal);//将鉴定图的数据转化为json字符串
					// console.log(appraisals);
					this.updateAppraisal = appraisals;
					this.updateVisible = true;
				}
			},
			//修改信息时，上传图标后的回调函数
			changeuploadSuccess(response) {
				this.UpdateGoodsGeneralParam.goodsGeneralImages = response.data;
			},
			//上传图标的规范
			changebeforeUpload(file) {
				var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
				const extension = testmsg === 'jpg'
				const extension2 = testmsg === 'png'
				const extension3 = testmsg === 'gif'
				const Imgsize = file.size / 1024 / 1024 < 2
				if (!extension && !extension2 && !extension3) {
					this.$message({
						message: '上传图片仅支持 jpg，png，gif格式!',
						type: 'warning'
					});
				}
				if (!Imgsize) {
					this.$message({
						message: '上传图片大小不能超过 2MB!',
						type: 'warning'
					});
				}
				return extension || extension2 || extension3 && Imgsize;
			},
			//确认修改大类信息的请求按钮
			beSureUpdate() {
				var flag = true;
				for (let i = 0; i < this.updateAppraisal.length; i++) {
					if (this.updateAppraisal[i].selectValue == null || this.updateAppraisal[i].selectValue == undefined ||
						this
						.updateAppraisal[i].selectValue == "" ||
						this.updateAppraisal[i].ImgTag == null || this.updateAppraisal[i].ImgTag == undefined || this
						.updateAppraisal[i].ImgTag == "") {
						this.$message({
							message: "请填入完整的自定义图鉴信息",
							type: 'warning'
						});
						flag = false;
					}
				}
				if (flag) {
					var ImagesJson = JSON.stringify(this.updateAppraisal);
					this.UpdateGoodsGeneralParam.goodsGeneralAppraisal = ImagesJson;
					this.$http.post("/goods-general/updateGeneralInfo", this.UpdateGoodsGeneralParam).then(resp => {
						if (resp.data.code == 200) {
							this.$message({
								message: '修改成功',
								type: 'success',
							});
							this.loadGeneral();
						} else {
							this.$message({
								message: resp.data.msg,
								type: 'warning'
							});
						}
					})
				}
				this.updateVisible = false;
			},
			//删除鉴定图数组（修改的弹窗）
			changeRemoveDomain(item) {
				var index = this.updateAppraisal.indexOf(item)
				if (index !== -1) {
					this.updateAppraisal.splice(index, 1)
				}
			},
			//新增鉴定图数组（修改的弹窗）
			addChangeKindImg() {
				this.updateAppraisal.push({
					ImgTag: null,
					selectValue: null
				})
			},
			//关闭新增大类信息的弹窗
			addclose() {
				this.addVisible = false;
				this.AddGoodsGeneralParam.goodsGeneralName = null;
				this.AddGoodsGeneralParam.goodsGeneralMessage = null;
				this.AddGoodsGeneralParam.goodsGeneralImages = null;
				this.AddGoodsGeneralParam.goodsGeneralAppraisal = [{
					ImgTag: null,
					selectValue: null
				}];
				this.diyImg = [{
					ImgTag: null,
					selectValue: null
				}];

			},
			//图片上传成功后的url
			uploadSuccess(response) {
				this.AddGoodsGeneralParam.goodsGeneralImages = response.data;
			},
			//添加商品大类按钮的请求
			beSureAddGeneralInfo() {
				var addFlag = true;
				if (this.AddGoodsGeneralParam.goodsGeneralImages == null) {
					this.$message({
						message: "图标未上传!",
						type: 'warning'
					});
				} else {
					for (let i = 0; i < this.diyImg.length; i++) {
						if (this.diyImg[i].selectValue == null || this.diyImg[i].selectValue == undefined || this.diyImg[i]
							.selectValue == "" ||
							this.diyImg[i].ImgTag == null || this.diyImg[i].ImgTag == undefined || this.diyImg[i].ImgTag ==
							"") {
							this.$message({
								message: "请填入完整的自定义图鉴信息",
								type: 'warning'
							});
							addFlag = false;
						}
					}
					if (addFlag) {
						var json = JSON.stringify(this.diyImg);
						this.AddGoodsGeneralParam.goodsGeneralAppraisal = json;
						this.$http.post("/goods-general/addGeneralInfo", this.AddGoodsGeneralParam).then(resp => {
							if (resp.data.code == 200) {
								this.$message({
									message: '添加成功',
									type: 'success',
								});
								this.loadGeneral();
							} else {
								this.$message({
									message: resp.data.msg,
									type: 'warning'
								});
							}
						})
					}
					this.addVisible = false;
				}
			},
			//添加鉴定图数组(新增的弹窗)
			addKindImg() {
				this.diyImg.push({
					ImgTag: null,
					selectValue: null
				});
			},
			//删除鉴定图数组(新增的弹窗)
			removeDomain(item) {
				var index = this.diyImg.indexOf(item);
				if (index !== -1) {
					this.diyImg.splice(index, 1);
				}
			},
			//文件上传尺寸与类型判断
			beforeUpload(file) {
				var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
				const extension = testmsg === 'jpg'
				const extension2 = testmsg === 'png'
				const extension3 = testmsg === 'gif'
				const imgSize = file.size / 1024 / 1024 < 2
				if (!extension && !extension2 && !extension3) {
					this.$message({
						message: '上传图片仅支持 jpg，png，gif格式!',
						type: 'warning'
					});
				}
				if (!imgSize) {
					this.$message({
						message: '上传图片大小不能超过 2MB!',
						type: 'warning'
					});
				}
				return extension || extension2 || extension3 && imgSize;
			}



		},
		created() {
			this.loadGeneral();
		}
	}
</script>

<style scoped>

</style>
